<template>
  <ElDialog v-model="dialogVisible" title="质检记录" width="40%" :before-close="handleClose">
    <Table :data="qualityRecords" :columns="columns" />
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="dialogVisible = false" type="primary">关闭</ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
import { Table, TableColumn } from '@/components/Table'
import { h } from 'vue'

// 定义props
const props = defineProps<Props>()
interface Props {
  visible: boolean
}


// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()

// 计算属性：控制弹窗显示
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 质检记录数据
const qualityRecords = ref([
  {
    inspectionDate: '2025-8-29',
    documentName: '质检报告-20250829-2',
    operation: '下载'
  },
  {
    inspectionDate: '2025-8-29',
    documentName: '质检报告-20250829-1',
    operation: '下载'
  },
  {
    inspectionDate: '2025-7-21',
    documentName: '质检报告-20250721-2',
    operation: '下载'
  },
  {
    inspectionDate: '2025-6-28',
    documentName: '质检报告-20250628-2',
    operation: '下载'
  }
])


const columns = reactive<TableColumn[]>([
  {
    field: 'inspectionDate',
    label: '质检日期',
    minWidth: 150
  },
  {
    field: 'documentName',
    label: '质检文档名称',
    minWidth: 200
  },
  {
    field: 'operation',
    label: '操作',
    fixed: 'right' as const,
    width: 100,
    slots: {
      default: ({ row }: { row: any }) => {
        return [
          h(
            ElButton,
            {
              type: 'primary',
              link: true,
              onClick: () => handleDownload(row)
            },
            () => '下载'
          )
        ]
      }
    }
  }
])

const handleClose = () => {
  dialogVisible.value = false
}

const handleDownload = (row: any) => {
  console.log('下载:', row.documentName)
  // 这里可以添加实际的下载逻辑
}
</script>

<style lang="scss" scoped>
.dialog-content {
  .selected-orders {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 6px;

    h4 {
      margin: 0 0 10px 0;
      color: #303133;
      font-size: 14px;
    }

    .order-list {
      .order-item {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 8px;
        padding: 8px 12px;
        background-color: #ffffff;
        border-radius: 4px;
        border: 1px solid #dcdfe6;

        .order-no {
          color: #409eff;
          font-weight: 500;
          margin-right: 10px;
        }

        .order-type {
          color: #606266;
          margin-right: 10px;
        }

        .order-status {
          color: #67c23a;
        }
      }
    }
  }

  .quality-records {
    h4 {
      margin: 0 0 15px 0;
      color: #303133;
      font-size: 14px;
    }

    .no-records {
      text-align: center;
      padding: 40px 0;
      color: #909399;

      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style>